<template>
	<div class="body">
		<div class="container">
			<div class="drop">
				<div class="content">
					<h2>登录</h2>
					<form>
						<div class="inputBox">
							<input type="text" v-model="form.username" placeholder="请输入用户名">
						</div>
						<div class="inputBox">
							<input type="password" v-model="form.password" placeholder="请输入密码">
						</div>
						<div class="inputBox">
							<input @click="login" type="button" style="cursor: pointer;" value="登录">
						</div>
					</form>
				</div>
			</div>
			<!--            <a href="#" class="btns">忘记密码？</a>
            <a href="#" class="btns signup">没有账号？立即注册</a> -->
		</div>
	</div>
</template>

<script>
	
	import {
		Search,
		Edit,
		Check,
		Message,
		Star,
		Delete
	} from '@element-plus/icons'
	
	import {
		defineComponent,
		ref
	} from 'vue';
	import {
		ElLoading,
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import Api from "../api/api.js";
	import Api3 from "../api/api3.js";
	import Storage from '../util/storage.js';
	import { h } from 'vue'
	
	export default {
		name: "Login",
		data() {
			return {
				form: {
					ptgPw: '',
					username: '',
					password: '',
				},
			}
		},
		methods: {
			login(formName) {
				var that = this;
				//console.log("登录")
				if (this.form.username == undefined || this.form.username.length <= 0) {
					ElMessage.error("请输入用户名")
					return;
				}

				if (this.form.password == undefined || this.form.password.length <= 0) {
					ElMessage.error("请输入密码")
					return;
				}
				let param = {}
				param.loginName = this.form.username;
				param.password = this.form.password;
				const loading = ElLoading.service({
					lock: true,
					text: '正在登录...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)',
				})

				Api.login(param).then(body => {
					//console.log(body)
					if(body.flag.indexOf("k") < 0){
							ElMessage.error("用户名或者密码错误")
								loading.close();
							return
					}
					if (body.accountNum) {
						localStorage.setItem("account_num", body.accountNum)

					} else {
						localStorage.removeItem("account_num")
						localStorage.removeItem("checked_account")
					}
					localStorage.setItem("pppp", btoa(JSON.stringify(body)));
					localStorage.setItem("uuu", btoa(param.loginName));
					localStorage.setItem("time", body.time)
					localStorage.setItem("token", body.token)
					setTimeout(() => {
						loading.close();
						//window.location = "/#/home";
						this.$router.push('/counterBid')
					}, 1500);
				}).catch(err => {
					loading.close();
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: "楷体_GB2312";
	}

	.body {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: #eff0f0;
		background-image: url('../assets/login_background.jpg');
		background-repeat: round;
	}

	.container {
		position: relative;
		right: -180px;
		display: flex;
		justify-content: center;
		align-items: center;


		.drop {
			position: relative;
			width: 350px;
			height: 350px;
			box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),
				25px 35px 20px rgba(0, 0, 0, 0.05),
				25px 30px 30px rgba(0, 0, 0, 0.05),
				inset -20px -20px 25px rgba(255, 255, 255, 0.9);
			transition: 0.5s;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50% 50% 30% 70% / 37% 45% 55% 63%;

			.content {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				text-align: center;
				padding: 40px;
				gap: 15px;

				h2 {
					position: relative;
					color: #333;
					font-size: 1.5em;
				}

				form {
					display: flex;
					flex-direction: column;
					gap: 20px;
					justify-content: center;
					align-items: center;

					.inputBox {
						position: relative;
						width: 225px;

						box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
							inset -2px -5px 10px rgba(255, 255, 255, 1),
							15px 15px 10px rgba(0, 0, 0, 0.05),
							15px 10px 15px rgba(0, 0, 0, 0.025);
						border-radius: 25px;

						input {
							border: none;
							outline: none;
							background: transparent;
							width: 100%;
							font-size: 1em;
							padding: 10px 15px;
						}

						input[type="submit"] {
							color: #fff;
							font-size: 1em;
							cursor: pointer;
							letter-spacing: 0.1em;
							font-weight: 500;
						}
					}

					.inputBox:last-child {
						width: 120px;
						background: #ff0f5b;
						box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
							15px 15px 10px rgba(0, 0, 0, 0.05),
							15px 10px 15px rgba(0, 0, 0, 0.025);
						transition: 0.5s;
					}

					.inputBox:last-child:hover {
						width: 150px;
					}

					.inputBox:before {
						content: '';
						position: absolute;
						top: 8px;
						left: 50%;
						transform: translateX(-50%);
						width: 65%;
						height: 5px;
						background: rgba(255, 255, 255, 0.5);
						border-radius: 5px;
					}
				}
			}
		}

		.drop:hover {
			border-radius: 50%;
		}

		.drop:before {
			content: '';
			position: absolute;
			top: 50px;
			left: 85px;
			width: 35px;
			height: 35px;
			border-radius: 50%;
			background: #fff;
			opacity: 0.9;
		}

		.drop:after {
			content: '';
			position: absolute;
			top: 90px;
			left: 110px;
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background: #fff;
			opacity: 0.9;
		}


		.btns {
			position: absolute;
			right: -120px;
			bottom: 0;
			width: 120px;
			height: 120px;
			background: #c61dff;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			text-decoration: none;
			color: #fff;
			line-height: 1.2em;
			letter-spacing: 0.1em;
			font-size: 0.8em;
			transition: 0.25s;
			text-align: center;
			box-shadow: inset 10px 10px 10px rgba(190, 1, 254, 0.05),
				15px 25px 10px rgba(190, 1, 254, 0.1),
				15px 20px 20px rgba(190, 1, 254, 0.1),
				inset -10px -10px 15px rgba(255, 255, 255, 0.5);
			border-radius: 28% 72% 66% 34% / 75% 48% 52% 25%;
		}

		.btns.signup {
			bottom: 150px;
			right: -200px;
			width: 80px;
			height: 80px;
			border-radius: 61% 39% 28% 72% / 47% 58% 42% 53%;
			background: #01b4ff;

			box-shadow: inset 10px 10px 10px rgba(1, 180, 255, 0.05),
				15px 25px 10px rgba(1, 180, 255, 0.1),
				15px 20px 20px rgba(1, 180, 255, 0.1),
				inset -10px -10px 15px rgba(255, 255, 255, 0.5);
		}

		.btns:hover {
			border-radius: 50%;
		}

		.btns:before {
			content: '';
			position: absolute;
			top: 15px;
			left: 30px;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: #fff;
			opacity: 0.45;
		}

		.btns.signup:before {
			left: 20px;
			width: 15px;
			height: 15px;
		}
	}
</style>